节流阀|更多_小程序项目开发京东商城uniapp之商品列表页面（下）

篇首语：本文由编程笔记#小编为大家整理，主要介绍了小程序项目开发-- 京东商城uni-app之商品列表页面 （下）相关的知识，希望对你有一定的参考价值。

&＃x1f44b;&＃x1f44b;欢迎来到&＃x1f44b;&＃x1f44b;
&＃x1f3a9;魔术之家&＃xff01;&＃xff01;&＃x1f3a9;

该文章收录专栏
✨ 2022微信小程序京东商城实战 ✨

专栏内容
✨ 京东商城uni-app项目搭建 ✨
✨ 京东商城uni-app 配置tabBar & 窗口样式 ✨
✨ 京东商城uni-app开发之分包配置 ✨
✨ 京东商城uni-app开发之轮播图 ✨
✨ 京东商城uni-app之分类导航区域 ✨
✨ 京东商城uni-app 首页楼层商品 ✨
✨ 京东商城uni-app 商品分类页面&＃xff08;上&＃xff09; ✨
✨ 京东商城uni-app 商品分类页面&＃xff08;下&＃xff09; ✨
✨ 京东商城uni-app之自定义搜索组件&＃xff08;上&＃xff09; ✨
✨ 京东商城uni-app之自定义搜索组件&＃xff08;中&＃xff09; ✨
✨京东商城uni-app之自定义搜索组件&＃xff08;下&＃xff09; – 搜索历史 ✨
✨ 京东商城uni-app之商品列表页面 &＃xff08;上&＃xff09; ✨

文章目录

• 一、上拉加载更多数据
• • 1. 在 pages.json 中配置上拉刷新&上拉距离
  • 2. 定义上拉触底行为
  • 3. 修改调取数据方法
  • 4. 效果
  
  
• 二、设置节流阀控制数据请求
• • 1. 定义节流阀
  • 2. 添加判断
  • 3. 效果
  
  
• 三、判断是否加载数据完毕
• 四、 上拉刷新效果
• • 1. 配置可下拉刷新
  • 2. 监听事件函数&＃xff08;重置全部数据&＃xff09;
  • 3. 修改获取数据函数&＃xff08;添加停止下拉刷新&＃xff09;
  • 4. 效果
  
  
• 六、配置列表项链接跳转
• • 1. 更改页面结构
  • 2. 定义参数跳转函数
  • 3. 效果
  
  
• 六、分支的提交
• 七、小结

1. 在 pages.json 中配置上拉刷新&上拉距离

,
"path" : "goods_list/goods_list",
"style" :

// 下拉刷新距离
"onReachBottomDistance": 150



2. 定义上拉触底行为

onReachBottom( )
// 显示加载效果
uni.showLoading(
title:"数据请求中..."
)
// 页面数自增加一
this.queryObj.pagenum &＃43;&＃43;
// 再次请求数据
this.getGoodlist()
// 隐藏加载效果
uni.hideLoading()
,


3. 修改调取数据方法

methods:
async getGoodlist()
const
data: res
&＃61; await uni.$http.get(&＃39;/api/public/v1/goods/search&＃39;, this.queryObj)
console.log(res)
if (res.meta.status !&＃61; 200) return uni.$showMsg("数据调取失败")
// 展开拼接
this.goodlist &＃61; [...this.goodlist,...res.message.goods]
this.total &＃61; res.message.total

,


4. 效果

我们在下拉刷新过程会由于网速慢或各种原因&＃xff0c;数据请求慢&＃xff0c;此时我们在还没请求到数据又下拉刷新一次&＃xff0c;但此时数据还未加载完成&＃xff08;函数还未运行完&＃xff09; &＃xff0c;此时页数加一&＃xff0c;后面等到数据再次请求就不是下一页了

1. 定义节流阀

data()
return
// 节流阀
isLoading : false
·······


2. 添加判断

&＃xff08;在获取数据前设置为true&＃xff08;允许加载数据&＃xff0c;添加页码后设置为false&＃xff0c;真正请求到数据在设置为true)

onReachBottom()
// 显示加载效果
uni.showLoading()
// 如果正在加载 跳出函数
if (this.isLoading) return

// 页面数自增加一
this.queryObj.pagenum&＃43;&＃43;
// 再次请求数据
this.getGoodlist()
// 隐藏加载效果
uni.hideLoading()
,
methods:
async getGoodlist()
// 此时开始加载 设置为 true
this.isLoading &＃61; true
const
data: res
&＃61; await uni.$http.get(&＃39;/api/public/v1/goods/search&＃39;, this.queryObj)
console.log(res)
if (res.meta.status !&＃61; 200) return uni.$showMsg("数据调取失败")
// 展开拼接
this.goodlist &＃61; [...this.goodlist, ...res.message.goods]
this.total &＃61; res.message.total
// 请求成功 设置为false &＃xff08; 没有走完函数是不允许再次请求&＃xff09;
this.isLoading &＃61; false




3. 效果

• 在onReachButtom函数中修改如下 &＃xff08; 这里我们假设你的数据条数为23条&＃xff09;

onReachBottom()
// 判断是否加载完毕
// 方法一 ( 总长度相加 )
if (this.goodlist.length &＃43; this.queryObj.pagesize >&＃61; this.total) return uni.$showMsg(&＃39;没有更多的数据啦...&＃39;)
// 方法二 &＃xff08; 页面数 * 页面数据条数&＃xff09;
// if (this.queryObj.pagenum * this.queryObj.pagesize >&＃61; this.total) return uni.$showMsg(&＃39;没有更多的数据啦...&＃39;)


1. 配置可下拉刷新

2. 监听事件函数&＃xff08;重置全部数据&＃xff09;

onPullDownRefresh()
// 重置所有数据
this.queryObj.pagenum &＃61; 1
this.goodlist &＃61; []
this.total &＃61; 0
this.isLoading &＃61; false
// 重写获取数据&＃xff0c;并传箭头函数进行取消下拉刷新
this.getGoodlist(() &＃61;> uni.stopPullDownRefresh())
,


3. 修改获取数据函数&＃xff08;添加停止下拉刷新&＃xff09;

async getGoodlist(callback)
// 此时开始加载 设置为 true
this.isLoading &＃61; true
const data: res &＃61; await uni.$http.get(&＃39;/api/public/v1/goods/search&＃39;, this.queryObj)
console.log(res)
// 取消下拉刷新 (如果有则往后走达到存在则允许函数的效果)
callback && callback()
// 请求成功 设置为false &＃xff08;没有走完函数是不允许再次请求&＃xff09;
this.isLoading &＃61; false
// 隐藏加载效果
uni.hideLoading()
if (res.meta.status !&＃61; 200) return uni.$showMsg("数据调取失败")
// 展开拼接
this.goodlist &＃61; [...this.goodlist, ...res.message.goods]
this.total &＃61; res.message.total



4. 效果

1. 更改页面结构

将block更改为view&＃xff0c;并添加onclick 事件跳转页面&＃xff0c;由于需要更多的操作所以这里不单纯更改为navigator组件

< <!-- 列表页 -->
<view class&＃61;"goods-list">
<view v-for&＃61;"(item,i) in goodlist" v-bind:key&＃61;"i" &＃64;click&＃61;"goToUrl(item)">
<my-goods :good&＃61;"item"></my-goods>
</view>
</view>


2. 定义参数跳转函数

methods:
goToUrl(item)
uni.navigateTo(
url:"/subpackages/goods_detail/goods_detail?goods_id&＃61;" &＃43; item.goods_id,
)
,


3. 效果

git add .
git commit -m "商品分类页面开发完成"
git push origin -u goodlist
git checkout master
git merge goodlist
git push
git branch -d goodlist


在项目开发中经常会遇到列表页开发&＃xff0c;如之前文章的搜索组件&＃xff0c;显示建立列表 ✨ 京东商城uni-app之自定义搜索组件&＃xff08;中&＃xff09; ✨&＃xff0c; 而这些列表页都有以下开发共性

1. 获取列表数据
2. 渲染列表数据结构到页面
3. 美化样式
4. 下拉刷新请求数据&＃xff08; 经典参数&＃xff1a;请求数据关键字、页码数、每页数据量、其他属性等&＃xff0c; 经典接口返回数据&＃xff1a;状态meta(是否查询成功&＃xff09;、所含数据总数、&＃xff09;
5. 下拉刷新节流阀
6. 上拉刷新重新加载数据
7. 为列表项添加链接

&＃x1f91e;到这里&＃xff0c;如果还有什么疑问&＃x1f91e;
&＃x1f3a9;欢迎私信博主问题哦&＃xff0c;博主会尽自己能力为你解答疑惑的&＃xff01;&＃x1f3a9;
&＃x1f973;如果对你有帮助&＃xff0c;你的赞是对博主最大的支持&＃xff01;&＃xff01;&＃x1f973;